<template>
  <div id="detail">
    <div class="background" :style="{backgroundImage:'url('+(shopinfo.info &&shopinfo.info.poi_back_pic_url)+')'}">
        <van-nav-bar
            left-text="返回"
            right-text="..."
            @click-left="$router.go(-1)" 
            left-arrow
        />
        <div class="header">
            <img :src="shopinfo.info&&shopinfo.info.picUrl" alt="">
            <h3>{{shopinfo.info &&shopinfo.info.name}}</h3>
            <van-search v-model="value" placeholder="搜索" shape='round' />
            <span>点餐</span>
            <span>评价</span>
            <span>商家</span>
            <div class="right" v-if="isCollect" @click="request_unfav(shopinfo.info)" style="color:red">❤</div>
            <div class="right" v-else @click="request_fav(shopinfo.info)">❤</div>
        </div>
    </div>
    
    <div class="box">
      <div class="boxleft">
        <van-sidebar v-model="currentIndex">
          <van-sidebar-item  v-for="(item,index) in shopinfo.taglist" :key="index" :title="item.name" />
        </van-sidebar>
      </div>
      <div class="boxright">
        <h4 v-if="shopinfo.taglist">{{shopinfo.taglist[currentIndex].name}}</h4>
        <div class="good" v-for="(item,index) in shopinfo.taglist && shopinfo.taglist[currentIndex].goodlist" :key="index">
          <div class="imgbox">
            <img :src="item.picture" alt="">
          </div>
          <div class="text">
            <div class="up">
              <div class="name">{{item.name}}</div>
              <div class="desc">{{item.month_saled_content}}</div>
            </div>
            <div class="down">
              <div class="price">¥{{item.min_price}}</div>
              <div class="opes">
                <span class="sub" v-show="isInShopCart(item)" @click="request_shopcartlist_sub(item)">-</span>
                <span class="num" v-show="isInShopCart(item)">{{isInShopCartNum(item)}}</span>
                <span class="add" @click="request_shopcartlist_add(item)">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Shopcart ref="shopcart"/>
    <div class="buttom" @click="$refs.shopcart.changeVisible()">
      <span><van-icon name="cart" size="18px" /> 总数：{{totalNum()}} 总价：{{totalPrice()}}</span>
      <span>去结算</span>
    </div>
  </div>
  
</template>

<script>
import { shop_shopinfo } from '@/utils/api';
import { Dialog } from 'vant';
import { mapActions, mapMutations, mapState } from 'vuex';
import Shopcart from '../components/Shopcart.vue'
export default {
  components:{Shopcart},
    data(){
        return{
            value:'',
            currentIndex:0,
            shopinfo:{},
        }
    },
    mounted(){
        shop_shopinfo({id:this.$route.params.id}).then((res)=>{
            if(res.data.shopinfo){
                this.shopinfo=res.data.shopinfo;
            }else{
                Dialog.alert({
                title: '提示',
                message: '该店铺已倒闭',
                }).then(() => {
                    this.$router.go(-1);
                });
            }
        })
    },
    computed:{
        ...mapState('collectlist',['collectlist']),
        ...mapState('shopcart',['shopcartlist']),
        isCollect(){
            var index=this.collectlist.findIndex((item)=>{
                return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
            })
            return index!==-1;
        }
    },
    methods:{
        ...mapMutations('collectlist',['collect','cancel_collect']),
        ...mapActions('collectlist',['request_fav','request_unfav',]),
        ...mapActions('shopcart',['request_shopcartlist_add','request_shopcartlist_sub']),
        isInShopCart(item){
          var index=this.shopcartlist.findIndex((it)=>{
            return it.id==item.id;
          });
          return index!==-1;
        },
        isInShopCartNum(item){
          var goods=this.shopcartlist.find((it)=>{
            return it.id==item.id;
          });
          if(goods){
            return goods.count;
          }else{
            return 0;
          }
        },
        totalNum(){
          let num=0;
          for(let i=0;i<this.shopcartlist.length;i++){
            num+=this.shopcartlist[i].count;
          }
          return num;
        },
        totalPrice(){
          let price=0;
          for(let i=0;i<this.shopcartlist.length;i++){
            price+=this.shopcartlist[i].count*this.shopcartlist[i].min_price;
          }
          return price;
        }
    }
}
</script>

<style lang="scss" scoped>
.header{
    height: 120px;
    position: relative;
    color: #fff;
}
.header h3{
    margin: 0 15px;
    top: 34%;
    left: 10%;
    position: absolute;
}
.header img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 14px;
}
.header .van-search{
    width: 100px;
    padding: 0;
    position: absolute;
    bottom: 8%;
    left: 2%;
    border-radius: 50%;
}
.header span:nth-child(4){
    position: absolute;
    bottom: 14%;
    left: 30%;
}
.header span:nth-child(5){
    position: absolute;
    bottom: 14%;
    left: 45%;
}
.header span:nth-child(6){
    position: absolute;
    bottom: 14%;
    left: 60%;
}
.header .right{
    position: absolute;
    right: 10%;
    color: white;
    font-size: 30px;
    top: 56%;
}

.box{
  display: flex;
  margin-bottom: 50px;
  .boxleft{
    width: 80px;
  }
  .boxright{
    flex:1;
    .good{
      display: flex;
      margin: 10px;
      .imgbox{
        width: 100px;
        height: 100px;
        margin-right: 10px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .text{
        flex:1;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name{
          font-size: 16px;
          font-weight: 600;
        }
        .desc{
          margin: 5px 0;
          color:#959595
        }
        .down{
          display: flex;
          justify-content: space-between;
          .price{
            font-size: 16px;
            color: red;
          }
          span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: skyblue;
            color: #fff;
            border-radius: 50%;
            margin: 0 5px;
            text-align: center;
            line-height: 20px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
.box h4{
  margin: 5px 0 5px 10px;
}

.buttom{
  // position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  background: wheat;
  position: fixed;
  height: 50px;
  span:nth-child(2){
    background: skyblue;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
  }
  span{
    height: 26px;
  }
}
</style>